<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <span>你好：</span>
  <h1></h1>
  <script>
    // 封装一个jsonp方法，实现一个jsonp的请求
    function jsonp(url) {
      // 1. 需要拼接url 在后面传递一个callback的参数
      // 2. 通过document.createElement()这个方法动态创建script标签，将上面的拼接好的url赋值给他的src属性
      // 3. 定义一个全局的函数。就是要绑定到window上
      // 拼接callback的函数名，要保证不重复，可以使用随机数或者时间戳

      // 利用script标签的src不受同源策略限制，通过js动态生成一个script标签，并给他的src属性拼接一个路径，这个路径中包含一个回调函数。
      return new Promise((resolve, reject) => {
        let fn = 'itcast' + Math.random().toString().replace('.', '')
        // 将fn绑定为一个全局函数
        window[fn] = function (data) {
          resolve(data)
        }

        // 这个callback是前后台商量好的
        let myurl = url + '?callback=' + fn
        // 动态创建script标签
        let script = document.createElement('script')
        script.src = myurl
        document.body.append(script)

        // 优化：script标签用完以后，得把它删掉 删掉window上绑定的全局函数
        script.onload = function () {
          // 移除节点
          script.remove()
          // 删除对象属性
          delete window[fn]
        }
      })
    }

    jsonp('http://192.168.14.86:3000/getdata')
    .then(res => {
      document.querySelector('h1').innerHTML = res.username
    })


  </script>
</body>

</html>